<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>名片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css?v=2.9">
    <link rel="stylesheet" href="../assets/css/style.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/index.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/extend.css?v=2.3">
    <link rel="stylesheet" href="../assets/css/icons.css?v=2.3">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body class="bg-gray">

<header data-am-widget="header" class="am-header am-header-default am-header-fixed ">

    <div class="am-header-left am-header-nav">
        <a onclick="history.go(-1)" class="widht-10s">
            <i class="icon_8"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        名片
    </h1>


</header>
<section class="" id="amz-main" data-tag="css-nav">
    <div class="tixian-top-me-ma-repeaty  font-color-white prelative">
        <div class="am-padding-top-lg">
            <div class="am-benj am-padding-bottom-lg">
                <div class="bg-white font-14 am-padding-left-sm am-padding-top-sm am-padding-bottom-sm  prelative am-listborder  overflow-hidden">
                    <div class=" ">
                        <div class="am-me-w80-square tu-max relative"><div class="love-box"><i class="icon-zf"></i><i class="icon-love"></i></div><img v-bind:src="staffInfo.head_icon" class="am-img-responsive"></div>
                        <div class="relative">
                            <div class="  ">
                                <div class="font-color-2 am-margin-top-xs font-18">{{staffInfo.name}}</div>
                                <div class="font-color-2 font-14">{{staffInfo.department_name}}</div>
                                <div class="font-color-1 font-14">福建某某某某科技有限公司</div>
                            </div>
                            <div class="  am-for-bg" style="position: absolute;right:10px;bottom:0;padding:5px 0">
                                <div class="box">
                                    <div class="icon-news-white"></div>
                                </div>
                                <div class=" font-color-white font-14 margin-top-2 border-radius-50 am-padding-left-sm am-padding-right-sm">发信息</div>
                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>


    <div class="bg-white am-padding-left-sm am-padding-right-sm am-margin-top-sm font-16">

        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="width-25px  ">
                <i class="my-icon my-icon-mp1"></i>
            </div>
            <div class="box-1 ">手机</div>
            <div class="font-color-1">
                {{staffInfo.mobile}}
            </div>
        </div>
        <div  class="box  border-bottom am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="width-25px  ">
                <i class="my-icon my-icon-mp2"></i>
            </div>
            <div class="box-1 ">邮箱</div>
            <div class=" font-color-1">
                {{staffInfo.mail}}
            </div>
        </div>
        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="width-25px  ">
                <i class="my-icon my-icon-mp3"></i>
            </div>
            <div class="box-1 ">微信</div>
            <div class=" font-color-1">
                {{staffInfo.weixin}}
            </div>
        </div>
        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="width-25px  ">
                <i class="my-icon my-icon-mp4"></i>
            </div>
            <div class="box-1 ">座机</div>
            <div class=" font-color-1">
                {{staffInfo.phone}}
            </div>
        </div>
        <div  class="box border-bottom  am-padding-top-sm am-padding-bottom-sm prelative">
            <div class="width-25px  ">
                <i class="my-icon my-icon-mp5"></i>
            </div>
            <div class="box-1 ">地址</div>
            <div class=" font-color-1">
                {{staffInfo.address}}
            </div>
        </div>

    </div>



    <div class="am-padding-left-sm am-padding-right-sm am-margin-top-sm">
        <div class="btn-88" v-on:click="savephone">通步到通信录</div>
    </div>

</section>


<footer data-am-widget="navbar" class="am-navbar am-cf am-navbar-default ">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="名片.html" class="selected">
                <img src="../assets/images/icons/mp_on.png"
                     alt="名片"/>
                <span class="am-navbar-label">名片</span>
            </a>
        </li>
        <li>
            <a href="../朋友圈/朋友圈.html" class="">
                <img src="../assets/images/icons/friend.png"
                     alt="商品"/>
                <span class="am-navbar-label">朋友圈</span>
            </a>
        </li>

        <li>
            <a href="17.html" class="">
                <img src="../assets/images/icons/product.png"
                     alt="推广助手"/>
                <span class="am-navbar-label">产品</span>
            </a>
        </li>
        <li>
            <a href="31.html" class="">
                <img src="../assets/images/icons/company.png"
                     alt="个人中心"/>
                <span class="am-navbar-label">公司</span>
            </a>
        </li>
    </ul>
</footer>



<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script>
    $(".tab-container .tab-items").on("click",function () {
        $(".tab-container .tab-items").removeClass("cur");
        $(this).addClass("cur");
    })
</script>
<script>
    var userid=getQueryString("userid");
    function getQueryString (name){
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]); return null;
    }
    $(function(){
        //获取用户信息
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:9001/push/v3.0/mini/card/'+userid,
            contentType:'application/json',
            success: function (data) {
                //注册vue
                new Vue({
                    el:"#amz-main",
                    data:{
                        staffInfo:data
                    },
                    methods:{
                        savephone:function(){
                            alert('手机号码是：'+data.mobile)
                        }
                    }


                })
            }
        });
    })


</script>

</body>
</html>